<template>
  <div>
    <div class="header">
      <img src="../assets/header_img.png" alt width="100%" />
    </div>
    <div class="lists">
      <van-tabs>
        <van-tab v-for="(item,index) in navs" :key="item.cid" :name="index" :title="item.cname">
          <GoodsCard :list='goods'></GoodsCard>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
	import GoodsCard from '../components/GoodsCard.vue'

export default {
  components: {
			GoodsCard
		},
  mounted() {
    this.$store.dispatch("getclassify");
    this.$store.dispatch("getList");
  },
  computed: {
    navs: function() {
      return this.$store.state.classifyModule.classifyItems;
    },
    goods: function() {
      return this.$store.state.listModule.listItems;
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 7;
}
.lists {
  margin-top: 2.4rem;
}
</style>